<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <title>Capricorncd, Calendar-Price-jQuery</title>
  <link rel="stylesheet" href="__STATIC__/admin/price-calendar/dist/css/calendar-price-jquery.min.css">
  <style>
    body {margin: 0; padding: 0; font-family: "Microsoft YaHei UI";}
  </style>
</head>
<body>

<div class="container"></div>
 <input type="hidden"  value="{$priceData}" id="priceData"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.4/polyfill.min.js"></script>
<script src="__STATIC__/admin/price-calendar/jquery-1.12.4.min.js"></script>
<script src="__STATIC__/admin/price-calendar/mock-data.js"></script>
<!--<script src="../dist/js/calendar-price-jquery.min.js"></script>-->
<script src="__STATIC__/admin/price-calendar/src/js/calendar-price-jquery.js"></script>
<script>
  $(function () {
    // 生成模拟数据
    // var MOCK_DATA1 = createMockData();
    var MOCK_DATA=$("#priceData").val();//真实数据
    MOCK_DATA=MOCK_DATA?JSON.parse(MOCK_DATA):[];
    var tree_ticket_id="{$id}";
    // 日历设置表单字段配置
    // key 字段名
    // name 表单label
    // value 默认值
    // placeholder input[placeholder]
    var calendarConfig = [
      {
        key: 'price',
        name: '原价',
        type: 'text',
        placeholder: '请输入'
      },
      {
        key: 'activity_price',
        name: '活动价',
        type: 'text',
        placeholder: '请输入'
      },
      {
        key: 'stock',
        name: '当天库存',
        type: 'number',
        placeholder: '请输入库存',
        // editable: false
      }
    ]

    // 日历中显示配置
    var showConfig = [
      {
        key: 'price',
        name: '原价:￥'
      },
      {
        key: 'activity_price',
        name: '活动价:￥'
      },
      {
        key: 'stock',
        name: '库:'
      }
    ]

    // 样式颜色配置
    var styleConfig = {
      // 头部背景色
      headerBgColor: '#098cc2',
      // 头部文字颜色
      headerTextColor: '#fff',
      // 周一至周日背景色，及文字颜色
      weekBgColor: '#098cc2',
      weekTextColor: '#fff',
      // 周末背景色，及文字颜色
      weekendBgColor: '#098cc2',
      weekendTextColor: '#fff',
      // 有效日期颜色
      validDateTextColor: '#333',
      validDateBgColor: '#fff',
      validDateBorderColor: '#eee',
      // Hover
      validDateHoverBgColor: '#098cc2',
      validDateHoverTextColor: '#fff',
      // 无效日期颜色
      invalidDateTextColor: '#ccc',
      invalidDateBgColor: '#fff',
      invalidDateBorderColor: '#eee',
      // 底部背景颜色
      footerBgColor: '#fff',
      // 重置按钮颜色
      resetBtnBgColor: '#77c351',
      resetBtnTextColor: '#fff',
      resetBtnHoverBgColor: '#55b526',
      resetBtnHoverTextColor: '#fff',
      // 确定按钮
      confirmBtnBgColor: '#098cc2',
      confirmBtnTextColor: '#fff',
      confirmBtnHoverBgColor: '#00649a',
      confirmBtnHoverTextColor: '#fff',
      // 取消按钮
      cancelBtnBgColor: '#fff',
      cancelBtnBorderColor: '#bbb',
      cancelBtnTextColor: '#999',
      cancelBtnHoverBgColor: '#fff',
      cancelBtnHoverBorderColor: '#bbb',
      cancelBtnHoverTextColor: '#666'
    }

    // 初始化日历
    var zxCalendar = $.CalendarPrice({
      el: '.container',
      // startDate: '2017-08-02',
      endDate: randomEndDate(),
      data: MOCK_DATA,//MOCK_DATA
      // 配置需要设置的字段名称
      config: calendarConfig,
      // 配置在日历中要显示的字段
      show: showConfig,
      // 自定义颜色
      style: styleConfig
    });

    // log(zxCalendar)

    // 监听设置表单提交
    // 将阻止默认流程执行
    // 继续执行默认流程，请执行参数next()
    zxCalendar.$on('submit-form', function (data, next) {
      // data 设置的数据
      // console.log('$(submit-form)表单数据 ================')
      // console.log(data)

      // 此处可以验证表单
      // 验证表单逻辑....
      // ....

      // 继续执行下一步
      next()
    })

    // 执行过程中错误回调
    zxCalendar.$on('error', function (err) {
      执行中的错误提示
      // console.error('$on(error)Error:')
      // console.log(err)
      alert(err.msg);
    })

    // 切换月份
    zxCalendar.$on('month-change', function (data) {
      // log('$on(month-change) 数据：');
      // log(data);
    })

    // 点击有效的某一天通知
    zxCalendar.$on('valid-day', function (day, data, next) {
      log('$on(valid-day)当前点击的(有效)日期为: ' + day + ', 数据：');
      log(data);

      // 继续执行默认流程
      next();
    })

    // 设置数据变化
    zxCalendar.$on('setup-value-change', function (data) {
      log('$on(setup-value-change)设置窗口被修改数据....');
      log(data);
      // 取消设置
      // 这里可以触发关闭设置窗口
    })

    // 点击重置按钮回调
    zxCalendar.$on('reset', function () {
      log('$on(reset)数据重置成功！');
    })

    // 点击确定按钮回调，返回当前设置数据
    zxCalendar.$on('confirm', function (data) {
      // log('$on(confirm)点击确定按钮通知！');
      //   log(typeof data)
      // log(data);
        $.ajax({
            url: "/admin/management.ticket/price",
            type: 'post',
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            dataType: "json",
             data : {data:data,tree_ticket_id:tree_ticket_id},
            timeout: 60000,
            success: function (res) {
                  if (res.code==1) {
                        parent.layer.msg("设置成功!", {time: 1000,icon:1}, function () {
                            //重新加载父页面
                            parent.location.reload();
                        });

                        return;

                    } else {

                        layer.msg(res.msg,{time: 2000,icon:2},function () {});

                    }
                
            },
            error: function (xhr, textstatus, thrown) {
              
                return false;
            }
         });
    })

    // 点击取消按钮回调
    zxCalendar.$on('cancel', function () {
      log('$on(cancel)取消设置 ....');
      // 取消设置
      // 这里可以触发关闭设置窗口
    })

  });

  function log (s) {
    console.log(s)
  }
</script>

</body>
</html>
